import React from 'react';
import moment from 'moment';
import { List, Avatar, Icon } from 'antd';
import Link from 'umi/link';
import styles from './index.less';
import line from '../../assets/line.png';


const IconText = ({ type, text }) => (
  <span>
    <Icon type={type} style={{ marginRight: 12, marginLeft: 12}} />
    {text}
  </span>
);

const ArticleContent = ({ data: { title, content, updatedAt, avatar, userId, owner, screenshot, viewsCount, collectionCount, subscribersCount, commentsCount  } }) => (
  <div className={styles.listContent}>
    <div className={styles.extra}>
      <Link to={`/post/user/${userId}`}><Avatar src={avatar} size="small" />{owner}</Link>
      <em className={styles.date}>{moment(updatedAt).format('YYYY-MM-DD HH:mm')}</em>
      <em>
        <List.Item
          className={styles.iconList}
          actions={[
            <IconText type="eye-o" text={viewsCount} />,
            <IconText type="star-o" text={collectionCount} />,
            <IconText type="like-o" text={subscribersCount} />,
            <IconText type="message" text={commentsCount} />,

          ]}
        >
        </List.Item>
      </em>
    </div>
    <img alt={title} className={styles.screenshot} src={screenshot || line}/>
    <div className={styles.description} dangerouslySetInnerHTML={{ __html: content }}></div>
  </div>
);

export default ArticleContent;
